<template>
  <div class="md-example-child md-example-child-cashier">
    <md-cashier
      ref="cashier"
      v-model="isCashierhow"
      :channels="cashierChannels"
    ></md-cashier>
	</div>
</template>

<script>import {Cashier} from 'mand-mobile'

export default {
  name: 'cashier-demo',
  components: {
    [Cashier.name]: Cashier,
  },
  data() {
    return {
      isCashierhow: true,
      cashierChannels: [
        {
          icon: 'cashier-icon-1',
          text: '招商银行(0056)',
          value: '001',
        },
        {
          icon: 'cashier-icon-2',
          text: '支付宝支付',
          value: '002',
        },
        {
          icon: 'cashier-icon-3',
          text: '微信支付',
          value: '003',
        },
        {
          icon: 'cashier-icon-4',
          text: 'QQ钱包支付',
          value: '004',
        },
        {
          icon: 'cashier-icon-5',
          text: '一网通支付',
          value: '005',
        },
      ],
    }
  },
  computed: {
    cashier() {
      return this.$refs.cashier
    },
  },
  mounted() {
    this.cashier.next('success', {
      buttonText: '好的',
    })
  },
}
</script>

<style lang="stylus">
.md-example-child-cashier
  .md-field
    margin-bottom 30px
  .md-cashier-channel-item
    .item-icon.cashier-icon-1
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-2
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-3
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-4
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-5
      background url('') center no-repeat
      background-size 26px
</style>
